<script setup lang="ts">

import {onMounted, reactive} from "vue";

const emits = defineEmits<{
  (e: 'update:value', str: string): void
}>()

withDefaults(
    defineProps<{
      value?: string
    }>(),
    {
      value: ''
    }
)

const options = reactive<{
  visible: boolean,
  list: string[],
  i: null | number
}>({
  visible: false,
  list: [
    'icon-arrow-down',
    'icon-arrow-fall',
    'icon-arrow-left',
    'icon-arrow-right',
    'icon-arrow-rise',
    'icon-arrow-up',
    'icon-caret-down',
    'icon-caret-left',
    'icon-caret-right',
    'icon-caret-up',
    'icon-double-down',
    'icon-double-left',
    'icon-double-right',
    'icon-double-up',
    'icon-down-circle',
    'icon-down',
    'icon-drag-arrow',
    'icon-expand',
    'icon-left-circle',
    'icon-left',
    'icon-menu-fold',
    'icon-menu-unfold',
    'icon-right-circle',
    'icon-right',
    'icon-rotate-left',
    'icon-rotate-right',
    'icon-shrink',
    'icon-swap',
    'icon-to-bottom',
    'icon-to-left',
    'icon-to-right',
    'icon-to-top',
    'icon-up-circle',
    'icon-up',
    'icon-check-circle',
    'icon-check-square',
    'icon-check',
    'icon-clock-circle',
    'icon-close-circle',
    'icon-close',
    'icon-exclamation-circle',
    'icon-exclamation',
    'icon-info-circle',
    'icon-info',
    'icon-minus-circle',
    'icon-minus',
    'icon-plus-circle',
    'icon-plus',
    'icon-question-circle',
    'icon-question',
    'icon-stop',
    'icon-at',
    'icon-cloud-download',
    'icon-code-block',
    'icon-code-square',
    'icon-code',
    'icon-customer-service',
    'icon-download',
    'icon-export',
    'icon-eye-invisible',
    'icon-eye',
    'icon-heart',
    'icon-history',
    'icon-home',
    'icon-import',
    'icon-launch',
    'icon-list',
    'icon-message-banned',
    'icon-message',
    'icon-more-vertical',
    'icon-more',
    'icon-poweroff',
    'icon-refresh',
    'icon-reply',
    'icon-save',
    'icon-scan',
    'icon-search',
    'icon-select-all',
    'icon-send',
    'icon-settings',
    'icon-share-alt',
    'icon-share-external',
    'icon-share-internal',
    'icon-star',
    'icon-sync',
    'icon-thumb-down',
    'icon-thumb-up',
    'icon-translate',
    'icon-upload',
    'icon-voice',
    'icon-align-center',
    'icon-align-left',
    'icon-align-right',
    'icon-attachment',
    'icon-bg-colors',
    'icon-bold',
    'icon-brush',
    'icon-copy',
    'icon-delete',
    'icon-edit',
    'icon-eraser',
    'icon-filter',
    'icon-find-replace',
    'icon-font-colors',
    'icon-formula',
    'icon-h1',
    'icon-h2',
    'icon-h3',
    'icon-h4',
    'icon-h5',
    'icon-h6',
    'icon-h7',
    'icon-highlight',
    'icon-italic',
    'icon-line-height',
    'icon-oblique-line',
    'icon-ordered-list',
    'icon-original-size',
    'icon-paste',
    'icon-quote',
    'icon-redo',
    'icon-scissor',
    'icon-sort-ascending',
    'icon-sort-descending',
    'icon-sort',
    'icon-strikethrough',
    'icon-underline',
    'icon-undo',
    'icon-unordered-list',
    'icon-zoom-in',
    'icon-zoom-out',
    'icon-mute-fill',
    'icon-pause-circle-fill',
    'icon-play-arrow-fill',
    'icon-play-circle-fill',
    'icon-skip-next-fill',
    'icon-skip-previous-fill',
    'icon-sound-fill',
    'icon-backward',
    'icon-forward',
    'icon-fullscreen-exit',
    'icon-fullscreen',
    'icon-live-broadcast',
    'icon-music',
    'icon-mute',
    'icon-pause-circle',
    'icon-pause',
    'icon-play-arrow',
    'icon-play-circle',
    'icon-record-stop',
    'icon-record',
    'icon-skip-next',
    'icon-skip-previous',
    'icon-sound',
    'icon-faceBook-circle-fill',
    'icon-facebook-square-fill',
    'icon-google-circle-fill',
    'icon-qq-circle-fill',
    'icon-twitter-circle-fill',
    'icon-weibo-circle-fill',
    'icon-alipay-circle',
    'icon-code-sandbox',
    'icon-codepen',
    'icon-facebook',
    'icon-github',
    'icon-gitlab',
    'icon-google',
    'icon-qq-zone',
    'icon-qq',
    'icon-twitter',
    'icon-wechat',
    'icon-wechatpay',
    'icon-weibo',
    'icon-chinese-fill',
    'icon-english-fill',
    'icon-face-frown-fill',
    'icon-face-meh-fill',
    'icon-face-smile-fill',
    'icon-moon-fill',
    'icon-pen-fill',
    'icon-sun-fill',
    'icon-apps',
    'icon-archive',
    'icon-bar-chart',
    'icon-book',
    'icon-bookmark',
    'icon-branch',
    'icon-bug',
    'icon-bulb',
    'icon-calendar-clock',
    'icon-calendar',
    'icon-camera',
    'icon-cloud',
    'icon-command',
    'icon-common',
    'icon-compass',
    'icon-computer',
    'icon-copyright',
    'icon-dashboard',
    'icon-desktop',
    'icon-dice',
    'icon-drag-dot-vertical',
    'icon-drag-dot',
    'icon-drive-file',
    'icon-ear',
    'icon-email',
    'icon-empty',
    'icon-experiment',
    'icon-file-audio',
    'icon-file-image',
    'icon-file-pdf',
    'icon-file-video',
    'icon-file',
    'icon-fire',
    'icon-folder-add',
    'icon-folder-delete',
    'icon-folder',
    'icon-gift',
    'icon-idcard',
    'icon-image-close',
    'icon-image',
    'icon-interaction',
    'icon-language',
    'icon-layers',
    'icon-layout',
    'icon-location',
    'icon-lock',
    'icon-loop',
    'icon-man',
    'icon-menu',
    'icon-mind-mapping',
    'icon-mobile',
    'icon-moon',
    'icon-mosaic',
    'icon-nav',
    'icon-notification-close',
    'icon-notification',
    'icon-palette',
    'icon-pen',
    'icon-phone',
    'icon-printer',
    'icon-public',
    'icon-pushpin',
    'icon-qrcode',
    'icon-relation',
    'icon-robot-add',
    'icon-robot',
    'icon-safe',
    'icon-schedule',
    'icon-shake',
    'icon-skin',
    'icon-stamp',
    'icon-storage',
    'icon-subscribe-add',
    'icon-subscribe',
    'icon-subscribed',
    'icon-sun',
    'icon-tag',
    'icon-tags',
    'icon-thunderbolt',
    'icon-tool',
    'icon-trophy',
    'icon-unlock',
    'icon-user-add',
    'icon-user-group',
    'icon-user',
    'icon-video-camera',
    'icon-wifi',
    'icon-woman',
  ],
  i: null
})

const handleIcon = () => {
  options.visible = true;
}

const handleClick = (item: string) => {
  options.visible = false;
  emits('update:value', item);
}

onMounted(() => {
  options.visible = false;
})

</script>

<template>
<div class="icon arco-form-item-content arco-input-wrapper" @click="handleIcon">
  <div>{{ value }}</div>
  <div>
    <icon-drag-dot />
  </div>
</div>

  <a-modal
      title-align="start"
      title="选择icon"
      :visible="options.visible"
      :width="700"
      @cancel="options.visible = false"
      @ok="options.visible = false"
  >
    <div class="modal-content">
      <div class="list">
        <template v-for="item in options.list">
          <div class="list-item" @click="handleClick(item)">
            <component :is="item" :size="32"></component>
          </div>
        </template>
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
 .icon {
   height: 100%;
   width: 100%;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
 }

 .modal-content {
   height: 300px;
   overflow: hidden;
   .list {
     display: flex;
     overflow-y: auto;
     height: 100%;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 30px;
     &-item {
       cursor: pointer;
     }
   }
 }
</style>